/* ===== 全局变量和基础设置 ===== */
:root,
[data-theme="light"],
[data-theme="dark"] {
    /* 覆盖页面宽度 - 需要保留 !important 因为这是覆盖官方变量 */
    --page-max-width: 86% !important;
}

:root {
    /* 导航宽度 - 需要保留 !important 因为这是覆盖官方变量 */
    --sidebar-width: 180px;
    --left-sidebar-width: 180px;
}

/* ===== 工作区布局样式 ===== */
/* 工作区变四个模块 - 需要保留 !important 因为这是覆盖官方布局 */
@media (min-width: 992px) {
    .ce-block.col-md-4 {
        width: 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* 工作区导航列表字体大小 - 可以移除 !important */
.widget.links-widget-box .link-item {
    font-size: 15px;
}

/* 工作区列表字体大小加粗标题 */
.widget.links-widget-box .widget-head .widget-label .widget-title {
    font-size: 15px;
}

/* 工作区列表背景色 */
.widget.links-widget-box {
    padding: 28px;
    border: 1.2px solid #a7a7a7;
    background-color: #fafafa;
}

/* 快捷方式小部件背景色 */
.widget.shortcut-widget-box {
    background-color: #f7f7f7;
}

/* ===== 导航栏样式 ===== */
/* 导航背景色 */
.navbar {
    background: #dcdfe1;
}

/* 面包屑导航文字样式 */
.navbar-breadcrumbs a,
#navbar-breadcrumbs a {
    font-size: 16px;
    font-weight: bold;
}

/* ===== 侧边栏样式 ===== */
/* 侧边栏背景色 - 需要保留 !important 因为这是覆盖官方主题色 */
.body-sidebar {
    background: #112d4e !important;
}

/* 导航标题字体大小和字间距 - 需要更具体的选择器 */
.sidebar-item-label {
    font-size: 16px !important;
    color: rgb(227, 227, 227) !important;
    letter-spacing: 0.05em !important;
   
}
/*自检app导航颜色*/
.active-sidebar {
    background: rgb(35 40 47 / 0%) !important;
}
/* 折叠按钮文字颜色 - 需要保留 !important 因为这是覆盖官方主题色 */
.collapse-sidebar-link {
    color: rgb(255, 255, 255) !important;
}

/* 菜单栏图标白色 - 需要保留 !important 因为这是覆盖官方图标颜色 */
.body-sidebar-container.expanded .body-sidebar .sidebar-item-icon svg,
.body-sidebar-container.expanded .body-sidebar .collapse-sidebar-link svg {
    stroke: #efefef !important;
}

/* 菜单栏向下箭头白色 - 需要保留 !important 因为这是覆盖官方图标颜色 */
.body-sidebar-container.expanded .body-sidebar .btn-reset svg,
.body-sidebar-container.expanded .body-sidebar .drop-icon svg,
.body-sidebar-container.expanded .body-sidebar .show-in-edit-mode svg {
    fill: #e9eaec !important;
}

/* 菜单栏展开箭头 - 需要保留 !important 因为这是覆盖官方图标颜色 */
.icon-arrow-right-to-line,
svg.icon use[href="#icon-arrow-right-to-line"] {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* 侧边栏图标样式 */
.sidebar-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.sidebar-item-icon svg.icon {
    stroke: #ffffff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== 菜单项样式 ===== */
/* 导航标题高度 */
.body-sidebar-container.expanded .body-sidebar .sidebar-item-container {
    height: auto;
    min-height: 40px;
    display: flex;
    flex-direction: column;
}

/* 标题项样式 */
.body-sidebar-container.expanded .body-sidebar .sidebar-item-container > .standard-sidebar-item {
    height: 40px;
    display: flex;
    align-items: center;
}

/* 子菜单容器样式 */
.body-sidebar-container.expanded .body-sidebar .sidebar-child-item {
    width: 100%;
    margin-top: 2px;
}

/* 子菜单项样式 */
.body-sidebar-container.expanded .body-sidebar .sidebar-child-item .sidebar-item-container {
    min-height: 32px;
    padding-left: 10px;
}

/* 确保子菜单项显示正常 */
.sidebar-child-item.nested-container {
    display: block;
    width: 100%;
}

/* 菜单项悬停样式 - 需要保留 !important 因为这是覆盖官方主题色 */
.standard-sidebar-item:hover {
    background: #8da7c4 !important;
    border-radius: 8px;
}

.app-switcher-dropdown:hover {
    background: #8da7c4 !important;
    border-radius: 8px;
    color: #fff !important;
}

/* ===== App切换器样式 ===== */
/* app logo部分宽度 */
.app-item a {
    width: 168px;
}

/* app展开列表宽度 */
.app-switcher-menu {
    width: 158px;
}

/* app下拉箭头位置 */
.app-switcher-dropdown .standard-sidebar-item {
    gap: 3px;
}

/* ===== 导航栏搜索框样式 ===== */
/* 搜索栏容器样式调整 - 需要保留 !important 因为这是覆盖官方主题色 */
/* 作用：设置搜索栏容器的基础样式 */
/* 目标：确保搜索栏在导航栏中的正确显示 */
.search-bar {
    background-color: transparent !important; /* 容器背景透明 */
}

/* 搜索框awesomplete容器样式调整 - 需要保留 !important 因为这是覆盖官方样式 */
/* 作用：设置awesomplete容器的背景和边框 */
/* 目标：为搜索输入框提供白色背景容器 */
.search-bar .awesomplete {
    background-color: #ffffff !important; /* 白色背景 */
    border: 1px solid #d1d5db !important; /* 浅灰色边框 */
    border-radius: 6px !important;        /* 圆角 */
}

/* 搜索框输入字段样式调整 - 需要保留 !important 因为这是覆盖官方样式 */
/* 作用：确保搜索框内的输入字段有白色背景和合适的文字颜色 */
/* 目标：保持搜索框整体的一致性和可读性 */
.search-bar .awesomplete input,
.search-bar input {
    background-color: #ffffff !important; /* 输入框白色背景 */
    color: #374151 !important;             /* 深灰色文字确保可读性 */
    border: none !important;               /* 移除输入框边框，使用外层容器边框 */
}

/* 搜索框占位符文字样式 - 可以移除 !important */
/* 作用：设置占位符文字颜色，确保在白色背景下可见 */
/* 目标：提供良好的用户体验和视觉提示 */
.search-bar .awesomplete input::placeholder,
.search-bar input::placeholder {
    color: #9ca3af; /* 中等灰色占位符文字 */
}

/* 搜索图标样式调整 - 可以移除 !important */
/* 作用：确保搜索图标在白色背景下可见 */
/* 目标：保持搜索功能的视觉一致性 */
.search-bar .search-icon svg {
    stroke: #6b7280; /* 中等灰色图标 */
}

/* ===== 滚动条样式 - 设置为浅灰色#f5f5f5 ===== */
/* 作用：将页面所有滚动条颜色设置为浅灰色#f5f5f5 */
/* 目标：统一滚动条视觉效果，符合设计要求 */

/* 标准滚动条颜色属性 - 现代浏览器支持 */
* {
    scrollbar-color: #e8e8e8 #f0f0f0 !important; /* 滑块颜色 #f5f5f5，轨道颜色 #f0f0f0 */
}

/* Webkit内核浏览器滚动条样式 - Chrome, Safari, Edge */
::-webkit-scrollbar {
    width: 8px !important;  /* 垂直滚动条宽度 */
    height: 8px !important; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
    background: #f0f0f0 !important; /* 滚动条轨道背景色 */
}

::-webkit-scrollbar-thumb {
    background-color: #e8e6e6 !important; /* 滚动条滑块颜色 */
    border-radius: 4px !important; /* 滑块圆角 */
    border: 1px solid #e0e0e0 !important; /* 滑块边框 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ebebeb !important; /* 鼠标悬停时滑块颜色 */
}

::-webkit-scrollbar-corner {
    background: #f0f0f0 !important; /* 滚动条角落背景色 */
}
